
import React from "react";
import * as THREE from 'three';
import { Button, Drawer } from 'antd';
import EditMaterial from 'components/EditMaterial';
import Controller from 'Controller';
import useVisible from 'utils/hooks/useVisible';
import useSelectedElement from "components/Three/hooks/useSelectedElement";

export default function BaseProperties() {

    const { visible, onClose, onOpen } = useVisible();

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const element = useSelectedElement<THREE.Mesh>(threeController);

    const onChange = React.useCallback((e: THREE.Material) => {
        if (!element) return;
        threeController.run(async () => {
            element.version++;
            element.object3D.material = e;
        })
    }, [element, threeController])

    if (!element) return <></>;

    return (
        <>
            <Button size='small' type="primary" onClick={onOpen} >编辑</Button>
            <Drawer title="编辑材质" placement="right" width={340} onClose={onClose} visible={visible} bodyStyle={{ padding: 0 }} mask={false} >
                <EditMaterial material={element.object3D.material as THREE.Material} onChange={onChange} />
            </Drawer>
        </>
    )
}
